<template>
	<view class="opAdd">
		<view class="part">
			<view class="title">个人信息</view>
			<view class="forms">
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">收件人姓名</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" placeholder="请输入收件人姓名" @blur="checkForm" v-model="receiver" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">手机号</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="number" placeholder="请输入手机号码" @blur="checkForm" v-model="phone" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">所在地区</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<picker mode="region" @change="selAdd">
								<input type="text" placeholder="请选择所在地区" v-model="address" disabled placeholder-style="color:#999999;">
							</picker>
						</view>
						<view class="rightIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">详细地址</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" placeholder="请输入详细地址" @blur="checkForm" v-model="address_detail" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">设为默认</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt dFlex jEnd_aCenter">
							<switch style="transform: scale(0.8);" v-model="is_default" :checked="is_default?true:false" @change="changeDefault"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="getAdd" v-if="flag2" @tap='getWxAdd'>一键获取微信地址</view>
		<view class="getAdd" v-if="!flag2" style="opacity: 0.5;">一键获取微信地址</view>
		<view class="loginBtn" v-if="!flag" style="opacity: 0.5;">保存</view>
		<view class="loginBtn" v-if="flag" @tap='saveInfo'>保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				receiver:'',
				phone:'',
				address:'',
				address_detail:'',
				is_default:0,// 0非默认  1默认
				flag:false,
				flag2:true,
				link:'',
			};
		},
		onLoad(e) {
			this.link = this.tool.objToUrl(e);
			if(e.line){
				this.id = JSON.parse(e.line).id;
				this.receiver = JSON.parse(e.line).receiver;
				this.phone = JSON.parse(e.line).phone;
				this.address = JSON.parse(e.line).address;
				this.address_detail = JSON.parse(e.line).address_detail;
				this.is_default = JSON.parse(e.line).is_default?true:false;
				this.flag = true;
				this.flag2 = false;
			}
		},
		onShow(){
			this.initUser();
		},
		onShareAppMessage() {
			this.tool.monitor(this.link);
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor(this.link);
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						if(!this.id){
							this.phone = res.mobile ? res.mobile : '';
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 保存地址
			saveInfo(){
				if(!this.receiver){
					uni.showToast({
						title:'请输入收件人姓名',
						icon:"none"
					})
					return;
				}
				if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone))){
					uni.showToast({
						title:'手机号格式不正确',
						icon:"none"
					})
					return;
				}
				if(!this.address){
					uni.showToast({
						title:'请选择所在地区',
						icon:"none"
					})
					return;
				}
				if(!this.address_detail){
					uni.showToast({
						title:'请输入详细地址',
						icon:"none"
					})
					return;
				}
				this.tool.getData('/api/user/saveAddress',{
					id:this.id,
					receiver:this.receiver,
					phone:this.phone,
					address:this.address,
					address_detail:this.address_detail,
					is_default:this.is_default?1:0,
				}).then(res=>{
					if(res){
						uni.showToast({
							title:"信息保存成功",
							icon:'success'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 检查字段是否填写完成
			checkForm(){
				if(!this.receiver || !this.address || !this.address_detail || !this.phone){
					this.flag = false;
					this.flag2 = true;
				}else if(this.receiver && this.address && this.address_detail && this.phone){
					this.flag = true;
					this.flag2 = false;
				}
			},
			// 选择省市区
			selAdd(e){
				this.address = e.detail.value.join('_');
				this.checkForm();
			},
			// 修改是否默认
			changeDefault(e){
				this.is_default = e.detail.value?1:0;
			},
			// 获取微信地址
			getWxAdd(){
				uni.chooseAddress({
					success: (res) => {
						console.log(res);
						if(res.errMsg == 'chooseAddress:ok'){
							this.receiver = res.userName;
							this.phone = res.telNumber;
							this.address = res.provinceName + "_" + res.cityName + "_" + res.countyName;
							this.address_detail = res.detailInfo;
							this.is_default = 0;
							
							this.flag = true;
							this.flag2 = false;
						}
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'地址获取失败',
							icon:"none"
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.opAdd{
		width: 100%;
		padding: 12px 3.2%;
		box-sizing: border-box;
		.getAdd{
			width: 80%;
			margin: 0 auto;
			text-align: center;
			border-radius: 40px;
			padding: 11px 0;
			background: $col_active;
			color: white;
		}
		.loginBtn{
			width: 74.4%;
			left: 12.8%;
			position: fixed;
			bottom: 32px;
			text-align: center;
			border-radius: 40px;
			padding: 22rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
			color: white;
			font-size: 16px;
		}
		.part{
			width: 100%;
			background: white;
			border-radius: 8px;
			margin-bottom: 24px;
			.forms{
				width: 100%;
				.line{
					padding: 12px;
					box-sizing: border-box;
					border-bottom: 1px solid #E9E9E9;
					.lineTit{
						// font-weight: bold;
					}
					
					.lineVal{
						flex: 1;
						.tx{
							width: 40px;
							height: 40px;
							image{
								width: 40px;
								height: 40px;
								border-radius: 50%;
							}
						}
						.ipt{
							flex: 1;
							input{
								text-align: right;
							}
						}
						.rightIcon{
							width: 16px;
							margin-left: 4px;
						}
					}
				}
				.line:last-child{
					border: none;
				}
			}
			.title{
				padding: 16px 12px 12px;
				box-sizing: border-box;
				font-weight: bold;
			}
		}
	}
</style>
